<template>
  <div class="firstManageDetail  wrap-table">

    <!-- 查询区域 -->
    <el-form ref="form" :model="searchData" :rules="searchRules" label-width="120px" class="clearfix">
      <el-form-item label="初筛编号" class="pull-left">
        <el-input v-model="searchData.screenId" placeholder="请输入初筛编号">
        </el-input>
      </el-form-item>
      <!--<el-form-item label="研究编号" class="pull-left">-->
        <!--<el-input v-model="searchData.researchNo" placeholder="请输入研究编号">-->
        <!--</el-input>-->
      <!--</el-form-item>-->
      <!-- 操作区域 -->
      <div class="pull-right">
        <el-button class="pd-bt" @click="goBack">返回</el-button>
        <el-button type="primary" class=" pd-bt" @click="getList">查询</el-button>
      </div>

    </el-form>

    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basic">

        <!-- 表单区域 -->
        <el-form :model="form" :rules="rules" ref="ruleForm" class="form-wrapper">
          <el-form-item label="初筛编号" :label-width="formLabelWidth">
            <el-input disabled v-model="form.ScreenId" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓" :label-width="formLabelWidth" prop="Surname">
            <el-input v-model="form.Surname" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="名" :label-width="formLabelWidth">
            <el-input v-model="form.Name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名首字母" :label-width="formLabelWidth">
            <el-input v-model="form.FirstLetter" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" :label-width="formLabelWidth">
            <el-date-picker type="date" value-format="yyyy-MM-dd" default-value="1990-06-15" placeholder="选择日期" v-model="form.BirthDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="Mobile">
            <el-input :disabled="form.ResearchObjectId!==undefined" v-model="form.Mobile" type="number" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="招募地点" :label-width="formLabelWidth">
            <el-select v-model="form.RecruitPlaceId" placeholder="请选择招募地点" class="selectName">
              <el-option v-for="item in options2" :key="item.SYS_ID" :label="item.Name" :value="item.Code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户阶段" :label-width="formLabelWidth">
            <el-select v-model="prediod" placeholder="请选择研究阶段" class="selectName" @change="prediods">
              <el-option v-for="item in options5" :key="item.vale" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="初筛时间" :label-width="formLabelWidth">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.ScreenDate" style="width: 100%;"></el-date-picker>
          </el-form-item>

          <el-form-item label="不符合初筛的原因" :label-width="formLabelWidth">
            <el-select :disabled="form.ResearchObjectId!==undefined" v-model="form.ExcludeReasonId" placeholder="请选择不符合初筛的原因" clearable @change="changeSelect">
              <el-option v-for="item in options3" :key="item.SYS_ID" :label="item.Reason" :value="item.SYS_ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="未纳入原因" :label-width="formLabelWidth" clearable>
            <el-select :disabled="form.ResearchObjectId!==undefined" v-model="form.RefuseReason" placeholder="请选择" class="selectName" clearable  @change="changeSelect">
              <el-option label="对生命树项目不感兴趣" value="对生命树项目不感兴趣"></el-option>
              <el-option label="太忙了没时间参加" value="太忙了没时间参加"></el-option>
              <el-option label="因为生物样本收集，如晕针等" value="因为生物样本收集，如晕针等"></el-option>
              <el-option label="丈夫或其他家庭成员不同意" value="丈夫或其他家庭成员不同意"></el-option>
              <el-option label="住址离调查现场太远" value="住址离调查现场太远"></el-option>
              <el-option label="其他原因" value="其他原因"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参加项目" :label-width="formLabelWidth" class="isjoin">
            <el-select :disabled="disabledRegion1 ||form.ResearchObjectId!==undefined" v-model="form.IsJoin" placeholder="请选择是否参加项目">
              <el-option v-for="item in options9" :key="item.id" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="签署知情同意书" :label-width="formLabelWidth">
            <el-select v-model="form.SignInformedConsent" placeholder="请选择是否签署知情同意书"  :disabled="disabledRegion1 ||form.ResearchObjectId!==undefined">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
              <el-option label="需考虑" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="签署日期" :label-width="formLabelWidth">
            <el-date-picker  :disabled="disabledRegion1" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions1" placeholder="选择日期" v-model="form.SignInformedConsentDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <!--<el-form-item label="纳入后的研究编号" :label-width="formLabelWidth">-->
            <!--<el-input  :disabled="disabledRegion1" v-model="formInput" auto-complete="off"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="研究编号" :label-width="formLabelWidth" prop="ResearchNo">-->
            <!--<el-input  :disabled="disabledRegion1" v-model="form.ResearchNo" auto-complete="off" placeholder="请再输入一遍"></el-input>-->
          <!--</el-form-item>-->

        </el-form>
        <el-button type="primary" class=" pd-bt" style="margin-left: 300px;" @click="addSure('ruleForm')">保存</el-button>
        <el-button v-if="form.ResearchObjectId==undefined" @click="addToObject" type="primary" class=" pd-bt" style="margin-left: 50px;">添加为研究对象</el-button>
        <!-- 空div,用来撑高底部高度 -->
        <div class="div-empty"></div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      let regex = new RegExp(
        /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
      );
      if (value == "") {
        callback();
      } else if (value !== "" && value.length !== 11) {
        callback(new Error("请输入正确的手机号位数"));
      } else {
        if (regex.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      }
    };
    var validateYanj2 = (rule, value, callback) => {
      if (this.formInput !== "") {
        if (value === "") {
          callback(new Error("请再次输入"));
        } else if (value !== this.formInput) {
          callback(new Error("两次输入不一致!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      pickerOptions1: {
        // 设置签署日期的禁用选项
        disabledDate(date) {
          if (date > new Date()) {
            return true;
          }
        }
      },
      activeName: "basic",
      searchData: {
        screenId: "",
      },
      dialogFormVisible: false,
      formInput: "",
      formLabelWidth: "200px",
      isObjectId:false,
      disabledRegion1: false, // 是否禁用参见项目
      form: {
        SYS_ID: "",
        ScreenId: "",
        Surname: "",
        Name: "",
        FirstLetter: "",
        BirthDate: "",
        Mobile: "",
        RecruitPlaceId: "",
        RecruitPlace: "",
        ScreenDate: new Date(),
        ExcludeReasonId: "",
        IsJoin: "2",
        ResearchObjectId:'',
        SignInformedConsent: "",
        SignInformedConsentDate: "",
        ResearchNo: "",
        RefuseReason: ""
      },
      searchRules: {
        mobile: [{ validator: validateMobile, trigger: "blur" }]
      },
      rules: {
        Surname: [{ required: true, message: "请输入姓", trigger: "blur" }],
        ResearchNo: [{ validator: validateYanj2, trigger: "blur" }],
        Mobile: [{ validator: validateMobile, trigger: "blur" }]
      },
      options1: [], //招募地点
      options2: [], //招募地点
      options3: [],
      prediod: "1",
      options5: [
        { value: "1", label: "孕前期" },
        { value: "2", label: "怀孕期" }
      ], //研究阶段
      options9: [
        { value: "0", label: "否" },
        { value: "1", label: "是" },
      ]
    };
  },
  watch: {
    //    "form.ExcludeReasonId"(value) {
    //          console.log(value)
    //      if (value) {
    //        this.form.IsJoin = "0";
    //        this.disabledRegion1 = true;
    //      }
    //      else if(value==''){
    //          this.form.IsJoin = "";
    //          this.disabledRegion1 = false;
    //      }
    //      else{
    //        this.disabledRegion1 = false;
    //      }
    //    }
  },
  mounted() {
    let that = this;
    that.form = JSON.parse(that.$route.query.id);
    that.zhaoAdress();
    that.formInput = that.form.ResearchNo;
    that.resonLIst();
    // 解决用户阶段都为固定，孕前期的问题.
    this.prediod = this.form ? this.form.Period : this.prediod;
    if((this.form.ExcludeReasonId!==''&&this.form.ExcludeReasonId!==undefined)||(this.form.RefuseReason!==''&&this.form.RefuseReason!==undefined)){
      that.disabledRegion1=true
    }
  },
  methods: {
    changeSelect(val) {
      let isTrue=false;
      if((this.form.ExcludeReasonId!==''&&this.form.ExcludeReasonId!==undefined)||(this.form.RefuseReason!==''&&this.form.RefuseReason!==undefined)){
        isTrue=true
      }
      if (val !== "") {
        this.form.IsJoin = "0";
        this.form.SignInformedConsent=''
        this.form.SignInformedConsentDate=''
        this.formInput=''
        this.form.ResearchNo=''
        this.disabledRegion1 = true;
      } else {
        if(!isTrue){
          this.form.IsJoin = "";
          this.disabledRegion1 = false;
        }
      }
    },
    getList() {
      let that = this;
      if(that.searchData.screenId==''){
        that.$message({
          message:'请输入查询条件',
          type:'info'
        })
        return false
      }
      that.formInput = "";
      that
        .service({
          url: "/ResearchObject/GetFirstScreenByScreenId",
          method: "get",
          params: {
            ...that.searchData,
            pageCount: 0,
            pageSize: 1
          }
        })
        .then(response => {
          if (response.dtData.length > 0) {
            that.$message.success("获取数据成功");
            that.form = response.dtData[0];
          } else {
            that.$message.error("未查询到相关数据");
            that.form = {};
          }
          that.loading = false;
        })
        .catch(data => {
          that.loading = false;
        });
    },
    goBack() {
      //
      this.$router.go(-1); //返回上一页
      let view = this.$route;
      this.$store.dispatch("delVisitedViews", view); //关闭tab，跳转到上一级
    },
    addToObject() {
      // 添加到研究对象
      this.validateRules();
    },
    prediods: function(val) {
      this.resonLIst();
    },
    showMessageBox() {
      const h = this.$createElement;
      this.$msgbox({
        message: h("p", null, [
          h("div", null, "不能添加该用户为研究对象！ "),
          h("div", null, "添加研究对象需符合以下条件： "),
          h("div", null, "用户愿意参加项目； "),
          h("div", null, "签署知情同意书； "),
          h("div", null, "填写签署知情同意书日期。 ")
        ]),
        title: "提示",
        confirmButtonText: "确定",
        closeOnClickModal: false,
        callback: action => {
          return;
        }
      });
    },
    addSure(formName) {
      //确认添加
      let that = this;
      let valT = $(".selectName input").val();
      if (valT !== "") {
        that.form.RecruitPlace = valT;
      }
      if (that.form.Surname == "") {
        return;
      }
      that
        .service({
          url: "/ResearchObject/SaveFirstScreen",
          method: "post",
          data: {
            ...that.form
          }
        })
        .then(response => {
          that.dialogFormVisible = false;
          that.$message({
            type: "success",
            message: response.msg
          });
          that.loading = false;
        })
        .catch(data => {
          that.loading = false;
        });
    },
    validateRules() {
      // 参加项目=是
      if (this.form.IsJoin !== "1") {
        this.showMessageBox();
        return false;
      }
      // 签署知情同意书=是
      if (this.form.SignInformedConsent !== "1") {
        this.showMessageBox();
        return false;
      }
      // 签署日期已填写
      if (!this.form.SignInformedConsentDate) {
        this.showMessageBox();
        return false;
      }
      this.$router.push({
        path: "/participant/list",
        query: {
          Surname: this.form.Surname,
          Name: this.form.Name,
          Mobile: this.form.Mobile,
          ResearchNo: this.form.ResearchNo,
          FirstScreenId: this.form.SYS_ID,
          Period: "",
          LastMenseDate: "",
          ExpectedDate: "",
          CommunityId: "",
          UserState: "1",
          GroupType: ""
        }
      });
    },
    zhaoAdress() {
      //招募地点
      let that = this;
      that
        .service({
          url: "/Dic/GetRecruitPlace",
          method: "get",
          params: {
            placeCode: "",
            placeName: "",
            pageCount: 0,
            pageSize: 100
          }
        })
        .then(resp => {
          that.options2 = resp.dtData;
          that.options1 = that.options2;
        })
        .catch(data => {
          console.log(data);
        });
    },
    resonLIst() {
      //不符合初筛原因
      let that = this;
      that
        .service({
          url: "Dic/GetExcludeReason",
          method: "get",
          params: {
            pageCount: 0,
            pageSize: 100,
            userType: that.prediod,
            keyWord: ""
          }
        })
        .then(response => {
          that.options3 = response.dtData;
        })
        .catch(data => {});
    }
  }
};
</script>
<style>
.firstManageDetail {
  /* width: 50%; */
  /* margin-top: 30px; */
}
.form-wrapper {
  width: 50%;
  margin: 30px 0;
}
.div-empty {
  height: 30px;
}
</style>


